<template>
    <div>
        <mt-swipe :auto="4000">
            <!-- 在组件中，使用v-for循环的话，一定要使用:key-->
            <!-- 将来，谁使用此轮播图组件，谁为我们传递lunbotuList  -->
            <!--  此时，lunbotuList应该是父组件项向子组件传值来设置 -->
            <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
                <img :src="item.img" alt=""  :class="{full:isfull}">
            </mt-swipe-item>
        </mt-swipe>
    </div>
</template>
<script>
    export default {
        props: ["lunbotuList","isfull"],
    };
</script>
<style lang="scss" scoped>
    .mint-swipe {
        height: 400px;
        /*这是less的嵌套写法*/
        .mint-swipe-item {
            text-align: center;
            /*这是scss语法 写了&就是交集选择器，不写就是后代选择器*/
            /*&:nth-child(1) {*/
            /*    background-color: #2ac845;*/
            /*}*/

            /*&:nth-child(2) {*/
            /*    background-color: palevioletred;*/
            /*}*/

            /*&:nth-child(3) {*/
            /*    background-color: purple;*/
            /*}*/

            img {
                height: 100%;
            }
        }


    }
    .full{
        width: 100%;
    }
</style>